<template>
	<view class="content">
		<form class="registerFrom" @submit="register">
			<view class="">
				<view class="text">
					角色
				</view>
				<view class="roleName from-item">
					<p>
						<picker mode="selector" :range="roleNames" :value="roleIndex" @change="pickerRole">
							<view class="">
								{{roleNames[roleIndex]}}
							</view>
						</picker>
					</p>
				</view>
			</view>

			<view class="">
				<view class="text">
					账号
				</view>
				<view class="username from-item">
					<p>
						<input type="text" @blur="usernameConfirm" name="username" v-model="username" />
					</p>
				</view>
			</view>

			<view class="">
				<view class="text">
					别名
				</view>
				<view class="nickname from-item">
					<p>
						<input type="text" name="nickname" :value="nickname" />
					</p>
				</view>
			</view>
			<view class="">
				<view class="text">
					密码
				</view>
				<view class="password from-item">
					<p>
						<input type="password" name="password" :value="password" />
					</p>
				</view>
			</view>
			<view class="">
				<view class="text">
					确认密码
				</view>
				<view class="password from-item">
					<p>
						<input type="password" name="confirmPassword" :value="confirmPassword" />
					</p>
				</view>
			</view>
			<view class="">
				<view class="text">
					邮箱
				</view>
				<view class="email from-item">
					<p>
						<input type="text" name="email" @blur="confrimEmail" :value="email" />
					</p>
				</view>
			</view>
			<view class="">
				<view class="emailConfirm" @click="sendEmailConfirm">
					{{sendAuthCode}}
				</view>
				<view class="email from-item">
					<p>
						<input type="number" name="emailConfirm" :value="emailConfirm" />
					</p>
				</view>
			</view>



			<view class="subAndReset">
				<button form-type="submit" type="primary">注册</button>
			</view>

		</form>
	</view>
</template>

<script>
	var serverUrl = '';
	var globalEmail = ''
	export default {
		data() {
			return {
				user: {},
				confirmPassword: '',
				roleNames: ['用户', '管理员'],
				roleIndex: 0,
				emailConfirm: '',
				roleName: '',
				username: '',
				nickname: '',
				password: '',
				email: '',
				sendAuthCode: '点击获取验证码'
			}
		},
		onLoad() {
			serverUrl = this.serverUrl;
		},
		methods: {

			pickerRole(e) {
				//console.log('picker发送选择改变，携带值为', e.target.value)
				this.roleIndex = e.target.value
			},
			//注册
			register(param) {
				var roleName;
				var roleCode;
				var username = param.target.value.username;
				var nickname = param.target.value.nickname;
				var password = param.target.value.password;
				var confirmPassword = param.target.value.confirmPassword;
				var email = param.target.value.email;
				var emailConfirm = param.target.value.emailConfirm;
				if (this.roleIndex == 0) {
					roleName = '用户'
					roleCode = 'user'
				} else {
					roleName = '管理员'
					roleCode = 'admin'
				}
				//保证所有表单填满
				if (roleName == null || username == null || nickname == null || password == null ||
					confirmPassword == null || email == null || emailConfirm == null) {
					uni.showModal({
						content: '请完善表单',
						showCancel: false
					})
					return 0
				}
				//判断密码一致
				if (password != confirmPassword) {
					uni.showModal({
						content: '密码不一致',
						showCancel: false
					})
					return 0
				}
				//判断u
				uni.showModal({
					title: '确认注册',
					success(res) {
						if (res.confirm) {
							//这里发送注册请求
							uni.request({
								//这里非常sb 全局变量用不了
								url: serverUrl+'/user/register',
								method: 'POST',
								data: {
									emailConfirm: emailConfirm,
									roleCode: roleCode,
									roleName: roleName,
									username: username,
									nickname: nickname,
									password: password,
									email: email
								},
								//这里使用json数据，因为我们不想新建pojo.
								header: {
									'content-type': 'application/json'
								},
								success(res) {
									var code = res.data.code;
									if (code == '200') {
										//注册成功
										uni.showModal({
											title: '注册成功，请登录',
											success(res) {
												uni.navigateTo({
													url: '../login/login'
												})
											}
										})
									} else {
										//注册失败
										uni.showToast({
											title: '注册失败，请重试',
											icon: 'none'
										})
									}

								},
								fail() {
									//注册失败
									uni.showToast({
										title: '注册失败，请重试',
										icon: 'none'
									})
								}
							})
						}
					}
				})
			},
			//发送邮箱验证码
			sendEmailConfirm(e) {
				//这里我们获取不到this绑定到值，我们只有使用这个的页面的全局变量，scripte里面的globalEmail
				//这里请求后端异步发送邮箱验证码
				uni.request({
					url: this.serverUrl + '/user/emailConfirm',
					method: 'POST',
					data: {
						email: globalEmail
					},
					header: {
						// 使用这个会将data参数自动转化为params
						'content-type': 'application/x-www-form-urlencoded',
					},
					success(res) {
						var code = res.data.code;
						if (code == '200') {
							this.sendAuthCode = '';
							uni.showModal({
								title: '发送成功，请查收',
								showCancel: false
							})
						} else {
							uni.showToast({
								title: '发送失败，请重试',
								icon: 'none'
							})
						}
					},
					fail() {
						uni.showToast({
							title: '发送失败，请重试',
							icon: 'none'
						})
					}
				})

			},
			//验证用户名
			usernameConfirm(param) {
				var username = param.target.value;
				uni.request({
					url: this.serverUrl + '/user/usernameConfirm',
					method: 'POST',
					data: {
						username: username
					},
					header: {
						// 使用这个会将data参数自动转化为params
						'content-type': 'application/x-www-form-urlencoded'
					},
					success(res) {
						var code = res.data.code
						if (code == 200) {
							uni.showToast({
								title: '该账户可以注册'
							})
							return 0
						}
						uni.showToast({
							title: '该账户已经存在',
							icon: 'none',
							success() {
								//清空username
								this.username = ''
							}
						})
						//清空username
						this.username = ''

					}
				})

			},
			//验证邮箱格式
			confrimEmail(param) {
				var email = param.target.value;
				globalEmail = email;
				if (email.search(/^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$/) != -1) {
					return true;
				} else {

					uni.showModal({
						showCancel: false,
						title: '电子邮箱格式不正确'
					})
					return false;
				}

			}

			//其他方法.



		}
	}
</script>

<style>
	.from-item {
		height: 50upx;
		width: 500upx;
		margin-top: 20upx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 20upx;
		color: #000000;
		background-color: #FFFFFF;
		text-align: center;
		border-bottom: 1upx solid #000000;
	}

	.emailConfirm {
		color: #005FC5;
	}
</style>
